<template>
	<div class="sign">
		<!--<p class="signHeader">每日签到</p>-->
		<el-breadcrumb class="signHeader" separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">考勤</el-breadcrumb-item>
		  <el-breadcrumb-item>签到</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="signMain">
			<div class="righSide">
				<img src="../../assets/QRcode.jpg" alt="签到二维码" />
				<button class="signBtn" @click="signBtn">签到</button>
			</div>
			<div class="leftSide">
					<!--日历开始-->
				<div class="demo-block calender1">
					<el-calendar>
					  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
					  <template
					    slot="dateCell"
					    slot-scope="{date, data}" v-for="(item,index) in check">
					    <p :class="(check[0].fid==1) ? 'is-selected' : ''">
					      {{ data.day.split('-').slice(2).join('-') }} 
					      <span style="color: red;">{{(check[0].fid==1 ) ? '●' : ''}}</span>					      
					    </p>					    
					  </template>					  
					</el-calendar>
					<p style="padding: 0 0 10px 10px;"><span style="color: red;">●</span>异常</p>
				</div>
				<!--日历结束-->
				<!--异常信息开始-->
				<div class="leftSideWrong">
					<p style="font-size: 30px;color: skyblue;padding-bottom: 5px;">18</p>
					<p style="color: grey;padding-bottom: 5px;">2019年09月</p>
					<p style="color: red;">考勤状态：<span>异常</span></p>
				</div>
				<!--异常信息结束-->
				<!--打卡表格开始-->
				<div class="signList">
					<ul class="signChoice">
						<li>筛选条件</li>
						<li @click="late">迟到</li>
						<li @click="tooFast">早退</li>
						<li @click="nomal">正常</li>
					</ul>
					<template>
					  <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width:  %" @selection-change="handleSelectionChange">
					    <el-table-column type="selection" width="55">
					    </el-table-column>
					    <el-table-column prop="name" label="姓名" width="120">					      
					    </el-table-column>
					    <el-table-column  label="打卡时间" width="140">
					    	<template slot-scope="scope">{{ scope.row.date }}</template>
					    </el-table-column>
					    <el-table-column prop="thing" label="打卡类型" show-overflow-tooltip width="140">
					    </el-table-column>
					    <el-table-column prop="situation" label="考勤状态" show-overflow-tooltip width="140">
					    </el-table-column>
					  </el-table>
					  <div style="margin-top: 20px" class="signListBottom">
					    <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
					     <div class="block">
					     	<!--表格开始-->
						    <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="currentPage4"
						      :page-sizes="[1, 2, 3, 4]"
						      :page-size="1"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="4">
						    </el-pagination>
						    <!--表格结束-->				    
						  </div>
					    <el-button @click="toggleSelection()">取消选择</el-button>
					  </div>
					</template>
				</div>
				<!--打卡表格结束-->
			</div>	
		</div>			
	</div>
</template>

<script>
  export default {
    data() {
      return {
      	flag:[
      		{
      			id:0
      		},
      		{
      			id:1
      		},
      		{
      			id:2
      		}
      	],
      	check:[
      		{
      			fid:1
      		}
      	],
        tableData: [
	        {
	          uid:111,
	          name:'张三',
	          date: '2016-05-03',
	          thing: '签到',
	          situation: '正常',
	          time:'8:30'
	        },
	        {
	          uid:111,
	          name:'张三',
	          date: '2016-05-03',
	          thing: '签到',
	          situation: '正常',
	          time:'8:30'
	        },
	        {
	          uid:111,
	          name:'张三',
	          date: '2016-05-03',
	          thing: '签到',
	          situation: '正常',
	          time:'8:30'
	        }
        ],
        currentPage4: 4,
        multipleSelection: []
      }
    },
	mounted(){
		
	},
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      signBtn(){
      	console.log(new Date().toLocaleString())
      	var date = new Date()
      	var y = date.getFullYear()
      	var m = date.getMonth()+1
      	var d = date.getDate()
      	var h = date.getHours()
      	var min = date.getMinutes()
      	var s = date.getSeconds()
      	var entertime = y+'-'+m+'-'+d+' '+h+':'+min+':'+s
      	console.log(entertime)
      	console.log(this.tableData[0].uid)
      },
      late(){
      	
      },
      tooFast(){
      	
      },
      nomal(){
      	
      }
    }
  }
</script>

<style>
.sign{
    min-width: 0;
    overflow-y: scroll;
}
.sign .signMain{
	display: flex;
}
.sign .righSide{
	flex: 1;
	box-sizing: border-box;
	border-right: 1px solid black;
	margin-right: 10px;
}
.sign .righSide img{
	display: block;
	margin: 100px auto 0;
}
.sign .leftSide{
	flex: 2;
	min-width: 0;
	overflow: hidden;
	
}
.leftSide .demo-block{
	float: left;
	/*display: inline-block;*/
	width: 70%;
	margin-top: 10px;
}
.leftSideWrong{
	/*display: inline-block;*/
	float: right;
	width: 25%;
	margin: 0 auto;
	text-align: center;
	margin-top: 100px;
}
/*.leftSideWrong p:first-child{
	padding-top: 100px;
}*/
.sign .signHeader{
	width: 100%;
	font-size: 20px;
	/*text-align: center;*/
	/*background-color: gray;*/
	color: black;
	box-sizing: border-box;
	border-bottom:1px solid black ;
	padding: 10px;
}
.sign .signBtn{
	display: block;
	width: 100px;
	height: 100px;
	background-color: gray;
	/*text-align: center;*/
	margin:  30px auto;
	color: white;
	font-size: 30px;
	border-radius: 50%;
	border: none;
}
.sign .signBtn:visited{
	border: none;
	box-shadow: none;
}
.sign .demo-block {
	box-sizing: border-box;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
}
.sign .is-selected {
    color: #1989FA;
}
.sign .el-calendar{
	/*padding: 24px;*/
}
.sign .el-calendar__header{
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
}
.sign .el-calendar__title {
    color: #000;
    align-self: center;
}
.sign .el-button-group {
    display: inline-block;
    vertical-align: middle;
}
.sign .el-button-group>.el-button:not(:last-child) {
    margin-right: -1px;
}
.sign .el-button-group>.el-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sign .el-button-group>.el-button {
    float: left;
    position: relative;
}
.sign .el-button--mini {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
}
.sign .el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
.sign .el-calendar__body{
    padding: 12px 20px 35px;
}
.sign .el-calendar-table{
    table-layout: fixed;
    width: 100%;
}
.sign thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
.sign tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
.sign tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.sign .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    /*padding: 8px;
    height: 85px;*/
   height: 60px;
   padding: 17px 8px 8px;
}
.sign .demo-calendar.demo-block .is-selected {
    color: #1989fa;
}
.sign .el-calendar-table:not(.is-range) td.next,.sign .el-calendar-table:not(.is-range) td.prev {
    color: #c0c4cc;
}
.sign .el-calendar-table tr:first-child td {
    border-top: 1px solid #ebeef5;
}

.sign .el-calendar-table td.is-selected {
    background-color: #f2f8fe;
}

.sign .el-calendar-table td {
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
    vertical-align: top;
    transition: background-color .2s ease;
}
/*签到表格***********************************************************/
.sign .signList{
	width: 100%;
	/*display: flex;*/
	margin-top: 10px;
	float: left;
	border: 1px solid #ebebeb;
    border-radius: 3px;
}
.signList .signChoice li{
	display: inline-block;
	padding: 10px 30px 0 30px;
}
/*.sign .signList .el-table{
	padding: 24px;
}*/
.sign .signList .signListBottom{
	padding: 24px;
	position: relative;
}
.sign .el-table--fit {
    border-right: 0;
    border-bottom: 0;
}
.sign .el-table {	
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
    padding: 24px;
}
.el-table{
	overflow: hidden;
}
.sign .el-table__footer-wrapper,.sign .el-table__header-wrapper {
    overflow: hidden;
}
.sign .el-table__body-wrapper, .sign .el-table__footer-wrapper, .sign .el-table__header-wrapper {
    width: 100%;
}
.sign .el-table__body, .sign .el-table__footer, .sign .el-table__header {
    table-layout: fixed;
    border-collapse: separate;
}
.sign .el-table thead {
    color: #909399;
    font-weight: 500;
}
.sign .el-table td, .sign .el-table th.is-leaf {
    border-bottom: 1px solid #ebeef5;
}
.sign .el-table th {
    overflow: hidden;
    user-select: none;
    background-color: #fff;
}
.sign .el-table td, .sign .el-table th {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}
.sign .el-table th>.cell {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.sign .el-table-column--selection .cell {
    padding-left: 14px;
    padding-right: 14px;
}

.sign .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
}
.sign .el-checkbox:last-of-type {
    margin-right: 0;
}
.sign .el-checkbox {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    user-select: none;
    margin-right: 30px;
}
.sign .el-checkbox__input {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
}
.sign .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #409eff;
    border-color: #409eff;
}
.sign .el-checkbox__inner {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}
.sign .el-checkbox__inner:after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in .05s;
    transform-origin: center;
    transform: rotate(45deg) scaleY(1);
}
.sign .el-checkbox__original {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
}
.sign .el-table__body-wrapper {
    overflow: hidden;
    position: relative;
}
/*.sign .el-table__body-wrapper, .sign .el-table__footer-wrapper, .sign .el-table__header-wrapper {
    width: 100%;
}*/
/*分页*/
.sign .el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}
.sign .el-pagination button, .el-pagination span:not([class*=suffix]) {
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    box-sizing: border-box;
}
.sign .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: #606266;
}

.sign .el-pagination__sizes {
    margin: 0 10px 0 0;
    font-weight: 400;
    color: #606266;
}
.sign .el-select {
    display: inline-block;
    position: relative;
}
.sign .el-pagination .el-select .el-input {
    width: 100px;
    margin: 0 5px;
}
.sign .el-select>.el-input {
    display: block;
}
.sign .el-input--mini {
    font-size: 12px;
}
.sign .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}
.sign .el-pagination .el-select .el-input .el-input__inner {
    padding-right: 25px;
    border-radius: 3px;
}
.sign .el-pagination__sizes .el-input .el-input__inner {
    font-size: 13px;
    padding-left: 8px;
}

.sign .el-input--mini .el-input__inner {
    height: 28px;
    line-height: 28px;
}
.sign .el-input--suffix .el-input__inner {
    padding-right: 30px;
}
.sign .el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
}
.sign .el-pagination .el-input__inner {
    text-align: center;
    -moz-appearance: textfield;
    line-height: normal;
}
.sign .el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.sign .el-pagination .el-input__suffix {
    right: 0;
    transform: scale(.8);
}
.sign .el-input__suffix {
    position: absolute;
    height: 100%;
    right: 5px;
    top: 0;
    text-align: center;
    color: #c0c4cc;
    transition: all .3s;
    pointer-events: none;
}
.sign .el-select .el-input .el-select__caret {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform .3s;
    transform: rotate(180deg);
    cursor: pointer;
}

.sign .el-input--mini .el-input__icon {
    line-height: 28px;
}
.sign .el-input__icon {
    width: 25px;
    line-height: 40px;
}
.sign .el-input__icon, .el-input__prefix {
    height: 100%;
    text-align: center;
    transition: all .3s;
}

.sign .el-icon-arrow-up:before {
    content:"\e6e1";
}
.sign .el-input__icon:after {
    content:"";
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
}
.sign .el-pagination .btn-prev {
    padding-right: 12px;
}
.sign .el-pagination .btn-next, .sign .el-pagination .btn-prev {
    background: 50% no-repeat;
    background-size: 16px;
    background-color: #fff;
    cursor: pointer;
    margin: 0;
    color: #303133;
}
.sign .el-pagination button {
    border: none;
    padding: 0 6px;
    background: transparent;
}
.sign .el-pagination button, .sign .el-pagination span:not([class*=suffix]) {
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    box-sizing: border-box;
}
.sign .el-pagination .btn-next .el-icon, .sign .el-pagination .btn-prev .el-icon {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.sign .el-icon-arrow-left:before {
    content: "\e6de";
}
.sign .el-pager {
    user-select: none;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    padding: 0;
    margin: 0;
}
.sign .el-pager li {
    padding: 0 4px;
    background: #fff;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
}
.sign .el-pager li.active {
    color: #409eff;
    cursor: default;
}
.sign .el-pagination button:disabled {
    color: #c0c4cc;
    background-color: #fff;
    cursor: not-allowed;
}
.sign .el-pagination .btn-next {
    padding-left: 12px;
}
.sign .el-pagination .btn-next, .sign .el-pagination .btn-prev {
    background: 50% no-repeat;
    background-size: 16px;
    background-color: #fff;
    cursor: pointer;
    margin: 0;
    color: #303133;
}
.sign .el-icon-arrow-right:before {
    content: "\e6e0";
}
.sign .el-pagination button, .sign .el-pagination span:not([class*=suffix]) {
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    box-sizing: border-box;
}
.sign .el-pagination__jump {
    margin-left: 24px;
    font-weight: 400;
    color: #606266;
}
.sign .el-pagination__editor.el-input {
    width: 50px;
}
.sign .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}
.sign .el-pagination__editor {
    line-height: 18px;
    padding: 0 2px;
    height: 28px;
    text-align: center;
    margin: 0 2px;
    box-sizing: border-box;
    border-radius: 3px;
}
.sign .el-pagination__editor.el-input .el-input__inner {
    height: 28px;
}
.sign .el-pagination__jump .el-input__inner {
    padding: 0 3px;
}

.sign .el-pagination .el-input__inner {
    text-align: center;
    -moz-appearance: textfield;
    line-height: normal;
}
/*分页数下拉*/
.sign .el-popper {
    margin-top: 12px;
}
.sign .el-select-dropdown {
    position: absolute;
    z-index: 1001;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 5px 0;
}
.sign .el-scrollbar {
    overflow: hidden;
    position: relative;
}
.sign .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
}
.sign .el-select-dropdown__wrap {
    max-height: 274px;
}
.sign .el-select-dropdown__list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    box-sizing: border-box;
}
.sign .el-select-dropdown__item.selected {
    color: #409eff;
    font-weight: 700;
}

.sign .el-select-dropdown__item.hover, .sign .el-select-dropdown__item:hover {
    background-color: #f5f7fa;
}
.sign .el-select-dropdown__item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
}

.sign .el-popper .popper__arrow, .sign .el-popper .popper__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.sign .el-popper .popper__arrow:after {
    content: " ";
    border-width: 6px;
}
.sign .el-popper .popper__arrow {
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
}
.sign .el-popper .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #ebeef5;
}
.sign .el-popper .popper__arrow:after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
}
.sign .signListBottom .el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
    position: absolute;
    left: 80%;
    bottom: 25%;
}
</style>